<template>
  <div id="cancelOrderPage">
    <div class="warningContent">
      在线支付订单是处理退款，赔付等问题的唯一凭证，私下交易无法享受权益保障！
    </div>
    <div class="selectContent">
      <div class="listCell" v-for="item in list" @click.stop="clickCheckbox(item)">
        <div class="content">{{ item.content }}</div>
        <img
          :src="checkboxSelect"
          v-show="item.isCheck"
        />
        <img
          :src="checkboxDefault"
          v-show="!item.isCheck"
        />
      </div>

      <div class="moreReason">
        可备注具体原因
      </div>
      <textarea
        placeholder="请简要描述，限制50字以内"
        v-model.stop="reason"
        maxlength="50"
        @blur="fixScroll"
      ></textarea>
    </div>

    <van-button class="button" @click="submitClick">提交</van-button>
  </div>
</template>

<script>
import { api_orderCancel ,api_orderMasterCancel} from "@/service/api/repair";
import { Dialog } from "vant";

export default {
  name: "CancelOrderPage",
  data() {
    return {
      checkboxSelect: require("@/images/icon/checkbox_select.png"),
      checkboxDefault: require("@/images/icon/checkbox_default.png"),
      reason: "",
      list: [
        { content: "问题已解决，不需要", isCheck: false },
        { content: "下单地址有误", isCheck: false },
        { content: "支付遇到问题，无法完成支付", isCheck: false },
        { content: "无原因，其它", isCheck: false }
      ],
      orderid: this.$route.query.orderid,
      isMaster: this.$route.query.isMaster

    };
  },
   watch: {

   } ,
  methods: {
      fixScroll() {

          let u = navigator.userAgent;

          let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

          if (isiOS) {

              window.scrollTo(0, 0);

          }

      },
    clickCheckbox(item) {
        console.log(1111)
      var temp = !item.isCheck;

      for (var i = 0; i < this.list.length; i++) {
        let tempItem = this.list[i];
        tempItem.isCheck = false;
      }
      console.log(item)
      item.isCheck = temp;

      console.log(this.list)
    },
    submitClick() {
      var content = "";
      for (var i = 0; i < this.list.length; i++) {
        var model = this.list[i];
        if (model.isCheck) {
          content = model.content;
        }
      }

      if (content === "") {
        this.$toast("请选择原因");
        return;
      }

      // alert(this.orderid + "选择了:" + content + "填写了:" + this.reason);
      content = content + ';' + this.reason;

      var data = {
        orderId: this.orderid,
        reason: content
      };

      if (this.isMaster === 'true'){
          console.log('维修师傅取消');
          api_orderMasterCancel(data)
              .then(res => {
                  this.$router.back();
                  this.$toast('订单作废成功');

                  // Dialog.alert({
                  //     message: '订单作废成功'
                  // }).then(() => {
                  // this.$router.back();
                  // });


              })
              .catch(error => {
                  this.$toast(error.message);
              });
      } else {
          api_orderCancel(data)
              .then(res => {
                  this.$router.back();
                  this.$toast('订单取消成功');

                  // Dialog.alert({
                  //     message: '订单取消成功'
                  // }).then(() => {
                  //  this.$router.back();
                  // });

              })
              .catch(error => {
                  this.$toast(error.message);
              });
      }

    }
  }
};
</script>

<style scoped>
#cancelOrderPage {
  position: relative;
  top: 0;
  left: 0;
  /*right: 0;*/
  /*bottom: 0;*/
  width: 100%;
  height: 100%;
  z-index: 200;
  overflow: auto;
  background-color: #f6f8fb;
}
.warningContent {
  background-color: #ffe6e9;
  font-size: 0.8rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(242, 62, 84, 1);
  line-height: 1.3333333333333333rem;
  padding: 0.8333333333333334rem 1.3333333333333333rem;
}
.selectContent {
  margin: 1.3333333333333333rem;
  background-color: white;
  border-radius: 0.3rem;
}
.listCell {
  margin: 0 1.2rem;
  height: 3.533333333333333rem;
  border-bottom: 0.5px solid #f0f1f5;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.content {
  height: 1.4rem;
  font-size: 0.9rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.4rem;
}
img {
  width: 1.1rem;
  height: 1.1rem;
}
.moreReason {
  height: 1.4rem;
  font-size: 1rem;
  font-family: PingFangSC-Medium, PingFangSC;
  font-weight: 500;
  color: rgba(18, 28, 50, 1);
  line-height: 1.4rem;
  margin: 1.3333333333333333rem;
}

textarea {
  /*text-align: center;*/

  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Light, PingFangSC;
  font-weight: 300;
  height: 5.666666666666667rem;
  border: 1px solid #f0f1f5;
  width: 19.6rem;
  padding: 0.43333333333333335rem 0.7666666666666667rem;

  margin: 0 1.3333333333333333rem;
  margin-bottom: 1.5rem;


  box-shadow:0px 0px 0px rgba(0,0,0,0);
  -webkit-appearance:none;

}

textarea::-webkit-input-placeholder {
  color: #bfc3cd;
}
textarea::-moz-placeholder {
  color: #bfc3cd;
}
textarea::-ms-input-placeholder {
  color: #bfc3cd;
}
.button {
  margin: 0 1.3333333333333333rem;
  background: rgba(57, 123, 230, 1);
  width: 22.333333333333332rem;
  border-radius: 1.6333333333333333rem;
  color: white;
  font-size: 1.0666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
}
</style>
